<template>
  <div>
      <el-card class="box-card" v-for="(item,index) in arrData" :key="index">
          <div class=" card-onbox">
              <div class="leftimg">
                  <img :src="item.thumbnail_pic_s" alt="">
              </div>
              <div class="right-content">
                  <h5>{{item.title}}</h5>
                  <p>发布日期：{{item.date}}</p>
                  <p>来源：{{item.author_name}}</p>
                  <a :href="item.url">查看详情</a>
              </div>
          </div>
      </el-card>
  </div>
</template>

<script>
export default {
  props: {
      arrData:{
        type: Array
      }
    },
    //http://v.juhe.cn/toutiao/index?type=top&key=6dae471a56835ff78747237d31b52c96
    //	类型,,top(头条，默认),shehui(社会),guonei(国内),guoji(国际),yule(娱乐),tiyu(体育)junshi(军事),keji(科技),caijing(财经),shishang(时尚)

}
</script>

<style lang="scss" scoped>
      .leftimg{
        width:160px;
        height: 100px;
        overflow:hidden;
      img{
            display: block;
            width:100%;
            height: 100px;
            object-fit: cover; 
      }
  }
  .right-content{
      padding-left: 24px;
      text-align: left;
      h5{
          font-size: 16px;
          line-height: 26px;
          margin: 0;
          padding: 0;
      }
      p{
          line-height: 26px;
          color: #666;
          margin: 0;
          padding: 0;
      }
      a{
          color: #409eff;
          text-decoration: none;
          margin: 0;
          padding: 0;
      }
  }
  .card-onbox {
    display: flex;
  }
  .box-card{
      width: 1000px;
      display:inline-block !important;
      margin-bottom: 20px;
  }
</style>